<template>
  <div class="container">

    <el-card>
      <el-form size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="关键字" style="margin-left: 25px;">
              <el-input v-model="queryParams.keyword" placeholder="根据编号搜索" resize="horizontal" type="text" style="width: 200px;" />
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="15">
            <el-button type="button" size="mini" style="margin-left: 20px;" @click="clearFn"><span>清除</span></el-button>
            <el-button type="primary" size="mini" @click="searchFn"><span>搜索</span></el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 提示条 -->
      <el-alert
        :title="alertText"
        type="info"
        show-icon
      />
      <!-- 表格 -->
      <template>
        <el-table
          :data="list"
          style="width: 100%;margin-top: 10px;"
          align="center"
        >
          <el-table-column
            prop="id"
            label="编号"
            width="200"
          />
          <el-table-column prop="questionType" label="题型" width="80">
            <template v-slot="{row}">
              <span v-if="row.questionType==='1'">单选</span>
              <span v-else-if="row.questionType==='2'">多选</span>
              <span v-else>简答</span>
              <!-- <span>{{ quesType }}</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="200">
            <template v-slot="{row:{questionIDs}}">
              <a
                v-for="(item,index) in questionIDs"
                :key="index"
                href="#"
                style="color: rgb(0, 153, 255); "
                @click="getQuestionDetail(item.id)"
              >{{ item.number }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180" />
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="180" />
          <el-table-column prop="accuracyRate" label="正确率(%)" width="180" align="center" />
          <el-table-column prop="userName" label="录入人" width="180" />
          <el-table-column label="操作" width="80">
            <template v-slot="{row}">
              <el-button type="danger" icon="el-icon-delete" circle plain autofocus @click="open(row)" />
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <template>
        <el-pagination
          background
          style="text-align: right;"
          layout="prev, pager, next,sizes,jumper"
          :page-sizes="[20, 30, 50, 100]"
          :current-page="queryParams.page"
          :total="queryParams.total"
          @size-change="changeSize"
          @current-change="changePage"
        />
      </template>
    </el-card>
    <!-- 弹框 -->
    <el-dialog title="题目预览" width="900px" :visible.sync="showQuestionDialog">
      <el-row :gutter="20">
        <el-col :span="6">
          【题型】：<span>{{ type }}</span>
        </el-col>
        <el-col :span="6">【编号】：<span>{{ questionDetails.id }}</span></el-col>
        <el-col :span="6">【难度】：<span>{{ difficulty }}</span></el-col>
        <el-col :span="6">【标签】：<span>{{ questionDetails.tags||'无' }}</span></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">【学科】：<span>{{ questionDetails.subjectName }}</span></el-col>
        <el-col :span="6">【目录】：<span>{{ questionDetails.directoryName }}</span></el-col>
        <el-col :span="6">【方向】：<span>{{ questionDetails.direction }}</span></el-col>
      </el-row>
      <hr>
      <el-row style="margin: 0 auto;">
        【题干】：
      </el-row>
      <el-row style="margin: 0 auto;">
        <div style="color: rgb(0, 0, 255);" v-html="questionDetails.question" />
      </el-row>
      <template v-if="questionDetails.questionType==='1'">
        <el-row>  单选题 选项：（以下选中的选项为正确答案）</el-row>

        <el-row v-for="(item,index) in questionDetails.options" :key="index">
          <el-radio :value="item.isRight" :label="1">{{ item.title }}</el-radio>
        </el-row>
      </template>
      <template v-else-if="questionDetails.questionType==='2'">
        <el-row>  多选题 选项：（以下选中的选项为正确答案）</el-row>
        <el-row v-for="(item,index) in questionDetails.options" :key="index">
          <el-checkbox :value="item.isRight" :true-label="1">{{ item.title }}</el-checkbox>
        </el-row>

      </template>

      <hr>
      <el-row style="margin: 0 auto;">
        【参考答案】：<el-button style="background-color: rgb(245, 108, 108); color: #fff;" @click="showVideoFn">视频答案预览</el-button>
        <template>
          <div v-show="showVideo" class="video" style="height: 300px;">
            <video autoplay muted :src="questionDetails.videoURL" controls style="height: 100%;" />
          </div>
        </template>
      </el-row>
      <hr>
      <el-row style="margin: 20px 0;">
        【答案解析】：<div style="display: inline-block;" v-html="questionDetails.remarks" />
      </el-row>
      <hr>
      <el-row>
        【题目备注】：<div style="display: inline-block;" v-html="questionDetails.answer" />
      </el-row>
      <div slot="footer" class="dialog-footer" align="right">
        <el-button type="primary" @click="showQuestionDialog = false;showVideo=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  name: 'Randoms',
  data() {
    return {
      // 数据列表
      list: [], // 组题列表
      alertText: null, // 提示条
      queryParams: {
        page: 1,
        pagesize: 20,
        total: 0,
        keyword: null
      }, // 获取组题列表请求体
      // keywords: null, // 查询
      showQuestionDialog: false, // 题目预览弹框
      questionQueryParams: {
        id: null
      }, // 获取题目详情请求体
      questionDetails: {}, // 题目详情
      showVideo: false // 视频显示
    }
  },
  computed: {
    type() {
      return this.questionDetails.questionType === '1' ? '单选' : this.questionDetails.questionType === '2' ? '多选' : this.questionDetails.questionType === '3' ? '简答' : null
    },
    difficulty() {
      return this.questionDetails.difficulty === '1' ? '简单' : this.questionDetails.difficulty === '2' ? '一般' : this.questionDetails.difficulty === '3' ? '困难' : null
    }
  },
  created() {
    this.getrandomList()
  },
  methods: {
    async  getrandomList() {
      const { data } = await randoms(this.queryParams)
      // console.log(data)
      this.list = data.items
      this.queryParams.total = data.counts
      this.alertText = `数据一共 ${data.counts} 条`
    },

    // 分页功能
    changePage(newpage) {
      this.queryParams.page = newpage
      this.getrandomList()
    },

    // 分页跳转
    changeSize(newsize) {
      this.queryParams.pagesize = newsize
      this.getrandomList()
    },

    // 删除弹框
    open(row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await removeRandoms(row)
        this.getrandomList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        if (this.queryParams.page > 1 & this.list.length === 1) this.queryParams.page--
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    clearFn() {
      this.queryParams.keyword = null
      this.getrandomList()
    },
    // 搜索
    async searchFn() {
      this.queryParams.page = 1
      if (this.queryParams.keyword) {
        this.getrandomList()
      }
    },

    // 获取试题详情
    async getQuestionDetail(id) {
      this.showQuestionDialog = true
      this.questionQueryParams.id = id
      const { data } = await detail(this.questionQueryParams)
      this.questionDetails = data
    },

    // 视频解析
    showVideoFn() {
      if (!this.questionDetails.videoURL) {
        this.$message.error('无视频解析')
      } else {
        this.showVideo = true
      }
    }
  }

}
</script>

<style scoped lang='scss'>
.container{
  margin-top: 10px;
  margin-left: 10px;
}
.el-row{
  margin-bottom: 20px;
}
</style>
